<template>
  <view>
    <view class="mainBox">
      <!-- 顶部图片活动信息 -->
      <view class="topImgBox">
        <view class="leftImgBox">
          <image :src="info.imgUrl" mode="aspectFit"></image>
        </view>
        <view class="rightTextBox">
          <view class="title">
            {{ info.tradeGoodsName }}
          </view>
          <view class="text1">
            <view class=""> 时间：{{ formattedTradeTime }} </view>
            <view class="">
              <!-- 地点：上海摇爪宠物公园 -->
            </view>
          </view>
          <view class="text2">
            <view class="">
              <text class="priceText1">￥{{ info.tradePrice }}元</text>
              <text class="priceText2">/人</text>
            </view>
            <view class="numText">
              X {{ info.activityPersonnelList?.length }}位
            </view>
          </view>
          <view class="text3" @click="gotoSuccessOrder(info)">
            <text v-if="info.tradeStatus == 0">待支付</text>
            <text v-if="info.tradeStatus == 1">已支付</text>
            <text v-if="info.tradeStatus == 2">已取消</text>
            <text v-if="info.tradeStatus == 3">已退款</text>
            >
          </view>
        </view>
      </view>
      <view class="UserInfo">
        <view class="" v-for="(item, index) in info.activityPersonnelList">
          <view class="disspb">
            <text class="text1">活动参与人</text>
            <text class="text2">{{ item.participantsName }}</text>
          </view>
          <view class="lineBox"></view>
          <view class="disspb">
            <text class="text1">联系方式</text>
            <text class="text2">{{ item.participantsMobile }}</text>
          </view>
        </view>

        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">实付款</text>
          <text class="text2">￥{{ info.tradeMoney }}</text>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">订单编号</text>
          <text class="text2">{{ info.orderTradeId }}</text>
        </view>
        <!-- <view class="lineBox"></view> -->
        <!-- <view class="disspb">
					<text class="text1">支付方式</text>
					<text class="text2">微信支付</text>
				</view> -->
        <view class="lineBox"></view>
        <view class="disspb">
          <text class="text1">支付时间</text>
          <text class="text2">{{ info.payTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate } from "@/utils/filters.js";
import commonMixin from "@/mixin/commonMinxin";
export default {
  mixins: [commonMixin],
  data() {
    return {
      id: "",
      info: {},
    };
  },
  computed: {
    formattedTradeTime() {
      // 兼容info未加载时
      return this.info.tradeTime ? formatDate(this.info.tradeTime) : "";
    },
  },
  onLoad(e) {
    this.id = e.id;
    this.init();
  },
  methods: {
    init() {
      uni.app.post(
        "/activity/order/details",
        {
          id: this.id,
        },
        "json",
        "",
        (res) => {
          console.log(res, "res");
          if (res.code == 2000) {
            this.info = res.data;
            // this.BasicData = res.data.records[0]
            // this.BasicData.author=this.BasicData.mediaList[0]
          }
        },
      );
    },
    gotoSuccessOrder(info) {
      console.log(info.orderTradeId);
      if (info.tradeStatus == 1 && info.writeOffStatus == 0) {
        uni.navigateTo({
          url: `/pages/hotspot/orderDetailSuccess?id=${info.orderTradeId}`,
        });
      } else if (info.tradeStatus == 1 && info.writeOffStatus == 1) {
        uni.showToast({
          title: "订单已核销",
          icon: "none",
        });
      } else if (info.tradeStatus == 2) {
        uni.showToast({
          title: "订单已取消",
          icon: "none",
        });
      } else if (info.tradeStatus == 3) {
        uni.showToast({
          title: "订单已退款",
          icon: "none",
        });
      } else if (info.tradeStatus == 0) {
        uni.showToast({
          title: "订单未支付",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.mainBox {
  margin: 32rpx 26rpx;
  padding: 32rpx;
  background-color: #ffffff;
}

.topImgBox {
  display: flex;

  .leftImgBox {
    margin-right: 16rpx;

    image {
      width: 284rpx;
      height: 328rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
    }
  }

  .rightTextBox {
    flex: 1;

    .title {
      font-weight: bold;
      font-size: 30rpx;
      color: #303030;
      margin-bottom: 20rpx;
    }

    .text1 {
      font-weight: 400;
      font-size: 20rpx;
      color: #303030;
      margin-bottom: 64rpx;
      white-space: nowrap;
    }

    .text2 {
      display: flex;
      justify-content: space-between;

      .priceText1 {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }

      .priceText2 {
        font-weight: bold;
        font-size: 20rpx;
        color: #303030;
      }

      .numText {
        font-weight: bold;
        font-size: 32rpx;
        color: #303030;
      }
    }

    .text3 {
      font-weight: 400;
      font-size: 24rpx;
      color: #c69c6d;
      line-height: 40rpx;
      text-align: right;
      margin-top: 26rpx;
    }
  }
}

.UserInfo {
  margin-top: 52rpx;

  .lineBox {
    width: 100%;
    height: 0rpx;
    border: 2rpx solid #f8f8f8;
    margin: 18rpx auto 20rpx;
  }

  .disspb {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .text1 {
      font-weight: 500;
      font-size: 24rpx;
      color: #7f7f7f;
    }

    .text2 {
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
    }
  }
}
</style>
